<template>
  <el-card class="form-card">
    <template #header>
      <div class="card-header">
        <span>我的志愿</span>
      </div>
    </template>
    <div class="form-content">
      <!-- 提示信息 -->
      <el-alert title="请按优先级依次选择志愿队伍" type="info" :closable="false" style="margin-bottom: 20px" />

      <!-- 已选志愿列表 -->
      <div class="volunteer-list">
        <el-empty v-if="sortedTeams.length === 0" description="还没有选择志愿队伍" :image-size="100" />
        <div v-else class="team-list">
          <div v-for="(team, index) in sortedTeams" :key="team.teamId" class="team-item">
            <div class="team-header">
              <el-tag :type="getVolunteerType(index)" size="large">第{{ index + 1 }}志愿</el-tag>
              <el-button link type="danger" size="small" icon="Close" @click="handleUnselect(team.teamId)" />
            </div>
            <div class="team-info">
              <div class="info-row">
                <span class="label">毕设名称：</span>
                <span class="value">{{ team.teamName }}</span>
              </div>
              <div class="info-row">
                <span class="label">队长：</span>
                <span class="value">{{ getLeaderName(team) }}</span>
              </div>
            </div>
            <div class="team-actions">
              <el-button v-if="index > 0" link type="primary" size="small" icon="ArrowUp" @click="moveUp(index)">上移</el-button>
              <el-button v-if="index < sortedTeams.length - 1" link type="primary" size="small" icon="ArrowDown" @click="moveDown(index)">下移</el-button>
            </div>
          </div>
        </div>
      </div>

      <el-divider />

      <!-- 统计信息 -->
      <div class="stats-info">
        <div class="stat-item">
          <span class="stat-label">已选志愿：</span>
          <span class="stat-value">{{ sortedTeams.length }} / {{ maxVolunteer }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">剩余名额：</span>
          <span class="stat-value">{{ maxVolunteer - sortedTeams.length }}</span>
        </div>
      </div>

      <!-- 提交按钮 -->
      <el-button type="primary" @click="handleSubmit" :loading="submitting" :disabled="sortedTeams.length === 0" style="width: 100%; margin-top: 20px" size="large">提交志愿</el-button>
    </div>
  </el-card>
</template>

<script setup>
import { computed, getCurrentInstance } from 'vue'
import { ArrowUp, ArrowDown, Close } from '@element-plus/icons-vue'

const props = defineProps({
  selectedTeams: {
    type: Array,
    default: () => []
  },
  submitting: {
    type: Boolean,
    default: false
  },
  maxVolunteer: {
    type: Number,
    default: 3
  }
})

const emit = defineEmits(['unselect-team', 'move-up', 'move-down', 'submit'])
const { proxy } = getCurrentInstance()

// 排序后的队伍列表（按志愿顺序）
const sortedTeams = computed(() => {
  return [...props.selectedTeams].sort((a, b) => (a.volunteerOrder || 0) - (b.volunteerOrder || 0))
})

// 获取志愿标签类型
const getVolunteerType = (index) => {
  if (index === 0) return 'danger'
  if (index === 1) return 'warning'
  return 'success'
}

// 获取队长姓名
const getLeaderName = (team) => {
  const leader = team.studentTeams?.find((st) => st.isLeader === '1')
  return leader?.student?.user?.nickName || '未知'
}

// 取消选择
const handleUnselect = (teamId) => {
  emit('unselect-team', teamId)
}

// 上移
const moveUp = (index) => {
  if (index > 0) {
    emit('move-up', index)
  }
}

// 下移
const moveDown = (index) => {
  if (index < sortedTeams.value.length - 1) {
    emit('move-down', index)
  }
}

// 提交
const handleSubmit = () => {
  if (sortedTeams.value.length === 0) {
    proxy.$modal.msgWarning('请至少选择一个志愿队伍')
    return
  }
  emit('submit')
}
</script>

<style scoped lang="scss">
.form-card {
  height: 100%;
  display: flex;
  flex-direction: column;

  :deep(.el-card__body) {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}

.card-header {
  font-size: 24px;
  font-weight: 600;
  color: var(--el-color-primary);
}

.form-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.volunteer-list {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 16px;
}

.team-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.team-item {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
  }
}

.team-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.team-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;

  .info-row {
    display: flex;
    align-items: flex-start;
    font-size: 14px;

    .label {
      font-weight: 500;
      color: #606266;
      width: 80px;
      flex-shrink: 0;
    }

    .value {
      flex: 1;
      color: #303133;

      &.summary {
        word-break: break-all;
      }
    }
  }
}

.team-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  padding-top: 4px;
  border-top: 1px solid #e5e7eb;
}

.stats-info {
  display: flex;
  justify-content: space-around;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 4px;

  .stat-item {
    display: flex;
    align-items: center;
    gap: 8px;

    .stat-label {
      font-size: 14px;
      color: #606266;
    }

    .stat-value {
      font-size: 18px;
      font-weight: 600;
      color: var(--el-color-primary);
    }
  }
}
</style>
